<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      table {
        width: 600px;
        margin: 100px auto;
        text-align: center;
        border-collapse: collapse;
        font-size: 14px;
      }

      thead tr {
        height: 30px;
        background-color: skyblue;
      }

      tbody tr {
        height: 30px;
      }

      tbody td {
        border-bottom: 1px solid #d7d7d7;
        font-size: 12px;
        color: black;
      }

      .bg {
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>商品名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>01</td>
          <td>牛仔外套</td>
          <td>99元</td>
          <td>1</td>
          <td>99元</td>
        </tr>
        <tr>
          <td>02</td>
          <td>帽子</td>
          <td>25元</td>
          <td>2</td>
          <td>50元</td>
        </tr>
        <tr>
          <td>03</td>
          <td>双肩包</td>
          <td>100元</td>
          <td>1</td>
          <td>100元</td>
        </tr>
      </tbody>
    </table>
    <script>
      // 获取元素
      var trs = document.querySelector('tbody').querySelectorAll('tr');
      // 使用循环注册事件
      for (var i = 0; i < trs.length; i++) {
        // 鼠标经过事件onmouseover
        trs[i].onmouseover = function () {
          this.className = 'bg';
        };
        // 鼠标离开事件onmouseout
        trs[i].onmouseout = function () {
          this.className = '';
        };
      }
    </script>
  </body>
</html>